<template>
  <el-menu
    router
    :collapse="isCollapse"
    :default-active="$route.path"
    background-color="#304156"
    text-color="#bfcbd9"
    active-text-color="#ffd04b"
    unique-opened>

    <!-- 1. 首页（样板） -->
    <el-menu-item index="/Home">
      <i class="el-icon-s-home"></i>
      <span slot="title">首页</span>
    </el-menu-item>

    <!-- 2. 动态菜单（和首页同级） -->
    <el-menu-item
      v-for="(item, i) in menu"
      :key="i"
      :index="'/' + item.menuClick"
      class="custom-menu-item">
      <i :class="item.menuIcon"></i>
      <span slot="title">{{ item.menuName }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: "Aside",
  data() {
    return {
      // isCollapse: false
      /*menu: [
        {
          menuClick: 'Admin',
          menuName: '管理员管理',
          menuIcon: 'el-icon-s-custom'
        }, {
          menuClick: 'User',
          menuName: '用户管理',
          menuIcon: 'el-icon-user-solid'
        }
      ]*/
    }
  },
  computed: {
    "menu": {
      get() {
        return this.$store.state.menu
      }
    }
  },
  props: {
    isCollapse: Boolean
  }
}
</script>

<style scoped>
/* 动态菜单项整体 */
.custom-menu-item {
  height: 56px !important;
  line-height: 56px !important;
  padding-left: 20px !important;
  font-size: 14px;
  color: #bfcbd9;
  position: relative;
  transition: all .2s;
}

/* 图标与文字间距 */
.custom-menu-item i {
  margin-right: 12px;
  font-size: 16px;
  vertical-align: middle;
}

/* 悬停高亮 */
.custom-menu-item:hover {
  background-color: #263445 !important;
  color: #ffd04b !important;
}

/* 选中时左侧彩条 */
.custom-menu-item.is-active {
  background-color: #1f2a3a !important;
  color: #ffd04b !important;
}
.custom-menu-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  background: #ffd04b;
  border-radius: 2px;
}

</style>
